<template>
  <div>
    <top-header>
      <div slot="nav-left">
        <a href="#/login" class="nav-left">
          <img style="height: 44px;display: inline-table;margin-top: -3px;" src="../../assets/img/esin.png" alt="易信">
          <span class="newLogo-right">商家中心</span>
        </a>
      </div>
    </top-header>
    <div class="container">
      <el-steps class="steps" :active="active" finish-status="success">
        <el-step title="服务商信息" />
        <el-step title="基础信息" />
        <el-step title="证件信息" />
        <el-step title="提交成功" />
      </el-steps>

      <el-form v-show="active === 0" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="form">
        <el-form-item label="服务商类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio label="1" name="type">企业</el-radio>
            <el-radio label="2" name="type">个人</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机" prop="linkTel">
          <el-row>
            <el-col :span="8"><el-input v-model="ruleForm.linkTel" placeholder="输入酒店联系人电话"></el-input></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="图片验证码" prop="captcha">
          <el-row>
            <el-col :span="8"><el-input v-model="ruleForm.captcha" placeholder="请输入图片验证码"></el-input></el-col>
            <el-col :span="10" class="login-captcha"><img style="margin-left:10px" :src="captchaPath" @click="getCaptcha()" alt="" /></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="短信验证码" prop="smsCode">
          <el-row>
            <el-col :span="8"><el-input v-model="ruleForm.smsCode" placeholder="请输入短信验证码" /></el-col>
            <el-col :span="10">
              <el-button style="margin-left:10px" :disabled="!ruleForm.captcha || isSend" @click="sendSmsCode()">{{ isSend ? '(' + timer + ')秒后重试' : '发送' }}</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="" prop="accept">
          <el-checkbox :label="true" v-model="ruleForm.accept">同意</el-checkbox>
          <a @click="protocol = true">{{ hotelProtocol.name }}</a>
        </el-form-item>
        <el-form-item><el-button type="primary" @click="step1Submit" :disabled="!ruleForm.smsCode">下一步，填写基础信息</el-button></el-form-item>
      </el-form>
      <!--step 2-->
      <el-form v-show="active === 1" :model="baseInfo" :rules="baseInfoRules" ref="baseInfo" label-width="150px" class="form">
        <el-form-item label="联系人姓名" prop="linkName"><el-input v-model="baseInfo.linkName" placeholder="请输入联系人姓名" /></el-form-item>
        <el-form-item label="意向代理城市" prop="proxyCity">
          <el-select v-model="baseInfo.proxyCity" filterable placeholder="请选择">
            <el-option v-for="item in cityOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计投入资金" prop="constInput"><el-input v-model="baseInfo.constInput" placeholder="输入投入资金" /></el-form-item>
        <el-form-item label="联系人邮箱" prop="linkEmail"><el-input v-model="baseInfo.linkEmail" placeholder="输入联系人邮箱" /></el-form-item>
        <el-form-item label="企业年盈利" prop="annualProfit"><el-input v-model="baseInfo.annualProfit" placeholder="输入企业年盈利" /></el-form-item>
        <el-form-item v-show="ruleForm.type === '2'" label="现从事行业" prop="industryInvolved">
          <el-select v-model="baseInfo.industryInvolved" placeholder="选择行业">
            <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="ruleForm.type === '1'" label="所属行业" prop="industryInvolved">
          <el-select v-model="baseInfo.industryInvolved" placeholder="选择行业">
            <el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="ruleForm.type === '2'" label="个人情况介绍" style="height:300px">
          <quill-editor
            style="height:200px"
            class="editor"
            v-model="baseInfo.introduction"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="了解招商途径" prop="theWay">
          <el-radio-group v-model="baseInfo.theWay">
            <el-radio label="招商大会" name="JoinWay">招商大会</el-radio>
            <el-radio label="朋友介绍" name="JoinWay">朋友介绍</el-radio>
            <el-radio label="网络信息" name="JoinWay">网络信息</el-radio>
            <el-radio label="渠道推荐" name="JoinWay">渠道推荐</el-radio>
            <el-radio label="其他" name="JoinWay">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row type="flex">
          <el-form-item><el-button @click="active = 0">上一步</el-button></el-form-item>
          <el-form-item><el-button type="primary" @click="step2Submit">提交</el-button></el-form-item>
        </el-row>
      </el-form>
      <!--step 3-->
      <el-form v-show="active === 2 && ruleForm.type === '1'" :model="businessLicense" :rules="businessLicenseRules" ref="businessLicense" label-width="150px" class="form">
        <h2>
          <span>企业</span>
          <span class="strong">(*必填)</span>
        </h2>
        <el-form-item label="营业执照" prop="yyImg">
          <el-upload
            :action="this.$http.adornUrl('/hotel/common/upload')"
            list-type="picture-card"
            :before-upload="onSuccessCompany"
            :on-remove="onCompanyIdCardPicFileChange.bind(null, 0)"
            :on-change="onCompanyIdCardPicFileChange.bind(null, 0)"
            :on-exceed="onExceed"
            :limit="1"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="其他证明" prop="otherImgs">
          <el-upload
            :action="this.$http.adornUrl('/hotel/common/upload')"
            list-type="picture-card"
            :on-remove="onCompanyIdCardPicFileChange.bind(null, 1)"
            :on-change="onCompanyIdCardPicFileChange.bind(null, 1)"
            :on-exceed="onExceed"
            :limit="1"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="公司名称" prop="companyName"><el-input v-model="businessLicense.companyName" placeholder="输入公司名称" /></el-form-item>
        <el-form-item label="企业法人" prop="legalPerson"><el-input v-model="businessLicense.legalPerson" placeholder="请输入企业法人" /></el-form-item>
        <el-form-item label="统一社会信息码" prop="unifiedCode"><el-input v-model="businessLicense.unifiedCode" placeholder="请输入统一社会信息码" /></el-form-item>
        <el-form-item label="企业类型" prop="companyType"><el-input v-model="businessLicense.companyType" placeholder="请输入企业类型" /></el-form-item>
        <el-form-item label="注册资本" prop="registeredCapital"><el-input v-model="businessLicense.registeredCapital" placeholder="请输入注册资本" /></el-form-item>
        <el-form-item label="注册地址" prop="registeredAddress"><el-input v-model="businessLicense.registeredAddress" placeholder="请输入注册地址" /></el-form-item>
        <el-form-item label="营业期限" prop="businessTerm"><el-input v-model="businessLicense.businessTerm" placeholder="请输入营业期限" /></el-form-item>
        <el-form-item label="经营范围" prop="businessScope"><el-input v-model="businessLicense.businessScope" placeholder="请输经营范围" /></el-form-item>
      </el-form>
      <el-form v-show="active === 2 && ruleForm.type === '1'" :model="certificateInfo" :rules="certificateInfoRule" ref="certificateInfo" label-width="150px" class="form">
        <el-form-item label="公司电话" prop="companyTel"><el-input v-model="certificateInfo.companyTel" placeholder="请输入公司电话" /></el-form-item>
        <el-form-item label="公司经营地址" prop="companyAddress"><el-input v-model="certificateInfo.companyAddress" placeholder="请输入经营地址" /></el-form-item>
        <el-form-item label="公司规模" prop="companyScale">
          <el-select v-model="certificateInfo.companyScale" placeholder="选择规模">
            <el-option v-for="item in companyScaleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主营项目" prop="businessProject"><el-input v-model="certificateInfo.businessProject" placeholder="请输入主营项目" /></el-form-item>
        <el-row type="flex">
          <el-form-item><el-button @click="active = 0">上一步</el-button></el-form-item>
          <el-form-item><el-button type="primary" @click="applySubmit">提交</el-button></el-form-item>
        </el-row>
      </el-form>

      <el-form v-show="active === 2 && ruleForm.type === '2'" :model="certificateInfo" :rules="idCardRules" ref="certificateInfo2" label-width="150px" class="form">
        <h2>
          <span>个人</span>
          <span class="strong">(*必填)</span>
          <el-tag>需与酒店联系人保持一致</el-tag>
        </h2>
        <el-form-item label="姓名" prop="name"><el-input v-model="certificateInfo.name" placeholder="请输入身份证姓名" /></el-form-item>

        <el-form-item label="身份证号" prop="idCard"><el-input v-model="certificateInfo.idCard" placeholder="输入身份证号" /></el-form-item>

        <el-form-item label="身份证照(正面)" prop="idCardPicList">
          <el-upload
            :action="this.$http.adornUrl('/hotel/common/upload')"
            list-type="picture-card"
            :on-remove="onIdCardPicListFileChange.bind(null, 0)"
            :on-change="onIdCardPicListFileChange.bind(null, 0)"
            :on-exceed="onExceed"
            :before-upload="onSuccessIdCard"
            :limit="1"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>

        <el-form-item label="身份证照(反面)" prop="idCardPicList">
          <el-upload
            :action="this.$http.adornUrl('/hotel/common/upload')"
            list-type="picture-card"
            :on-remove="onIdCardPicListFileChange.bind(null, 1)"
            :on-change="onIdCardPicListFileChange.bind(null, 1)"
            :on-exceed="onExceed"
            :limit="1"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>

        <el-form-item label="身份证照(手持)" prop="idCardPicList">
          <el-upload
            :action="this.$http.adornUrl('/hotel/common/upload')"
            list-type="picture-card"
            :on-remove="onIdCardPicListFileChange.bind(null, 2)"
            :on-change="onIdCardPicListFileChange.bind(null, 2)"
            :on-exceed="onExceed"
            :limit="1"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <a @click="showTips = true">详情要求</a>
        </el-form-item>

        <el-row type="flex">
          <el-form-item><el-button @click="active = 1">上一步</el-button></el-form-item>
          <el-form-item><el-button type="primary" @click="applySubmit2">提交</el-button></el-form-item>
        </el-row>
      </el-form>
      <div style="text-align: center">
        <el-form>
          <router-link :to="{ path: 'login' }" v-show="active === 3">提交成功 等待审核吧</router-link>
          <el-row type="flex" v-show="errorMessage != null">
            <el-form-item><el-button @click="active = 2">上一步</el-button></el-form-item>
            <el-form-item>提交失败,{{ errorMessage }}</el-form-item>
          </el-row>
        </el-form>
      </div>

      <el-dialog :visible.sync="showTips" title="手持身份证拍照要求">
        <img src="../../assets/img/idCardSuccess.jpg" />
        <img src="../../assets/img/idCardError.jpg" />
        <ul>
          <li>免冠，建议未化妆，五关可见;</li>
          <li>身份证全部信息清晰无遮挡，否则将无法通过认证;</li>
          <li>完整露出手臂;</li>
          <li>以酒店门头招牌为背景图片;</li>
          <li>请勿进行任何软件处理;</li>
          <li>单张图片不超过5M，尺寸要求500（长）X412（宽）以上，支持jpg、png、gif;</li>
        </ul>
      </el-dialog>
      <el-dialog :visible.sync="protocol" title="加盟协议"><div class="map-wrap" v-html="hotelProtocol.content"></div></el-dialog>
    </div>
  </div>
</template>

<script>
import { getUUID } from '@/utils';
import citiesData from './cities.json';

export default {
  data: () => {
    return {
      isSend: false,
      timer: 60,
      hotelProtocol: {
        name: '',
        content: ''
      },
      protocol: false,
      captchaPath: '',
      editorOption: {
        placeholder: '填写个人介绍'
      },
      active: 0,
      errorMessage: null,
      cityOptions: [],
      industryOptions: [
        {
          label: 'IT服务',
          value: 'IT服务'
        },
        {
          label: '制造业',
          value: '制造业'
        },
        {
          label: '批发/零售',
          value: '批发/零售'
        },
        {
          label: '生活服务',
          value: '生活服务'
        },
        {
          label: '文化/体育',
          value: '文化/体育'
        },
        {
          label: '建筑/房地产',
          value: '建筑/房地产'
        },
        {
          label: '教育',
          value: '教育'
        },
        {
          label: '运输',
          value: '运输'
        },
        {
          label: '医疗',
          value: '医疗'
        },
        {
          label: '金融',
          value: '金融'
        },
        {
          label: '其他',
          value: '其他'
        }
      ],
      companyScaleOptions: [
        {
          label: '20人',
          value: 20
        },
        {
          label: '50人',
          value: 50
        },
        {
          label: '100人',
          value: 100
        },
        {
          label: '1000人',
          value: 1000
        }
      ],
      props: {
        label: 'name',
        value: 'id',
        children: 'brands'
      },
      ruleForm: {
        captcha: '',
        uuid: '',
        accept: '',
        linkTel: '',
        smsCode: '',
        type: '1',
        brand: '',
        introduction: ''
      },
      rules: {
        accept: [{ required: true, message: '请同意加盟协议' }],
        linkTel: [{ required: true, message: '请输入联系人电话' }],
        type: [{ required: true, message: '请输入服务商类型' }]
      },
      idCardRules: {
        name: [{ required: true, message: '请输入姓名' }],
        idCard: [{ required: true, message: '请输入身份证' }]
      },
      baseInfo: {
        linkName: '',
        linkEmail: '',
        proxyCity: '',
        constInput: '',
        theWay: '',
        annualProfit: ''
      },
      baseInfoRules: {
        linkName: [{ required: true, message: '请输入联系人' }],
        linkTel: [{ required: true, message: '请输入联系人电话' }],
        proxyCity: [{ required: true, message: '请选着代理城市' }],
        industryInvolved: [{ required: true, message: '请选着行业' }],
        linkEmail: [{ required: true, message: '请输入服务商类型' }],
        constInput: [{ required: true, message: '请输入服务商类型' }]
        /* introduction: [
                { required: true, message: "请输入酒店介绍" }
              ]*/
      },
      certificateInfo: {
        companyTel: '',
        companyScale: '',
        companyAddress: '',
        businessProject: '',
        industryInvolved: '',
        individualResume: '',
        companyIdCard: '',
        idCard: '',
        name: '',
        sfzFront: '',
        sfzBack: '',
        cardType: '身份证',
        sfzHand: ''
      },
      businessLicense: {
        companyName: '',
        unifiedCode: '',
        legalPerson: '',
        companyType: '',
        registeredCapital: '',
        registeredAddress: '',
        registeredTime: '',
        businessTerm: '',
        businessScope: ''
      },
      businessLicenseRules: {
        companyName: [{ required: true, message: '请输入公司名称' }],
        unifiedCode: [{ required: true, message: '请输入统一社会信息码' }],
        legalPerson: [{ required: true, message: '请输入法人' }],
        companyType: [{ required: true, message: '请输入公司类型' }]
      },
      certificateInfoRule: {
        yyImg: [{ required: true, message: '请上传营业执照' }],
        companyAddress: [{ required: true, message: '请输入公司地址' }],
        companyScale: [{ required: true, message: '请选着公司规模' }]
      },
      markers: [],
      mapCenter: [114.05558, 22.539679],
      showMap: false,
      showTips: false
    };
  },
  created() {
    this.getCaptcha();
  },

  mounted() {
    //this.fetchhotelBrands();
    this.fetchhotelProtocol();
    const citys = citiesData.reduce((p, n) => {
      for (let i in n.items) {
        p.push({ label: n.items[i].name, value: n.items[i].name, pinyin: n.items[i].pinyin });
      }
      return p;
    }, []);
    this.cityOptions = citys;
  },

  methods: {
    async sendSmsCode() {
      await this.checkSellerApply();
      await this.$http({
        url: this.$http.adornUrl('/hotel/common/smsCode'),
        method: 'get',
        params: this.$http.adornParams({
          mobile: this.ruleForm.linkTel,
          uuid: this.ruleForm.uuid,
          captchaCode: this.ruleForm.captcha
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.isSend = true;
          let time = setInterval(() => {
            this.timer -= 1;
            if (this.timer <= 0) {
              clearInterval(time);
              this.isSend = false;
            }
          }, 1000);
        } else {
          this.$message.error(data.msg);
          this.getCaptcha();
        }
      });
    },
    // 获取验证码
    getCaptcha() {
      this.ruleForm.uuid = getUUID();
      this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.ruleForm.uuid}`);
    },
    onEditorBlur() {},
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },
    checkSellerApply() {
      this.$http({
        url: this.$http.adornUrl('/hotel/seller/checkSellerApply'),
        method: 'get',
        params: this.$http.adornParams({
          tel: this.ruleForm.linkTel,
          type: 2
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          const fac = data.data;
          this.baseInfo = {
            linkName: fac.linkName,
            linkEmail: fac.linkEmail,
            proxyCity: fac.proxyCity,
            constInput: fac.constInput,
            theWay: fac.theWay,
            annualProfit: fac.annualProfit
          };
          this.certificateInfo = {
            companyTel: fac.companyTel,
            companyScale: fac.companyScale,
            companyAddress: fac.companyAddress,
            businessProject: fac.businessProject,
            industryInvolved: fac.industryInvolved,
            individualResume: fac.individualResume,
            companyIdCard: fac.companyIdCard,
            idCard: fac.idCard,
            name: fac.name,
            sfzFront: fac.sfzFront,
            sfzBack: fac.sfzBack,
            cardType: '身份证',
            sfzHand: fac.sfzHand
          };
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    step1Submit() {
      //校验验证码
      if (!this.ruleForm.accept) this.ruleForm.accept = null;
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return false;
        this.$http({
          url: this.$http.adornUrl('/hotel/common/checkSmsCode'),
          method: 'get',
          params: this.$http.adornParams({
            mobile: this.ruleForm.linkTel,
            vcode: this.ruleForm.smsCode
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.active = 1;
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    fetchhotelProtocol() {
      this.$http({
        url: this.$http.adornUrl('/hotel/hotelprotocol/info/4'),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.hotelProtocol = data.hotelProtocol ? data.hotelProtocol : {};
        } else {
          this.hotelProtocol = {};
        }
      });
    },
    step2Submit() {
      this.$refs.baseInfo.validate(valid => {
        if (!valid) {
          return false;
        }
        this.active = 2;
      });
    },
    applySubmit() {
      this.$refs.businessLicense.validate(va => {
        if (!va) {
          return false;
        }
        this.$refs.certificateInfo.validate(valid => {
          if (!valid) {
            return false;
          }
          this.$http({
            url: this.$http.adornUrl('/hotel/facilitator/apply'),
            method: 'post',
            data: this.$http.adornData({
              ...this.ruleForm,
              ...this.baseInfo,
              ...this.certificateInfo,
              ...this.businessLicense
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.active = 3;
              this.errorMessage = null;
            } else {
              this.active = 3;
              this.errorMessage = data.message;
            }
          });
        });
      });
    },
    applySubmit2() {
      this.$refs.certificateInfo2.validate(valid => {
        if (!valid) {
          return false;
        }
        this.$http({
          url: this.$http.adornUrl('/hotel/facilitator/apply'),
          method: 'post',
          data: this.$http.adornData({
            ...this.ruleForm,
            ...this.baseInfo,
            ...this.certificateInfo,
            ...this.businessLicense
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.active = 3;
            this.errorMessage = null;
          } else {
            this.active = 3;
            this.errorMessage = data.message;
          }
        });
      });
    },
    onSuccessIdCard(file) {
      const formData = new FormData();
      formData.append('file', file);
      this.$http({
        url: this.$http.adornUrl('/hotel/facilitator/parse-id-card'),
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.certificateInfo = {
            ...this.certificateInfo,
            ...data.idCardInfo
          };
        } else {
        }
      });
    },
    onSuccessCompany(file) {
      const formData = new FormData();
      formData.append('file', file);
      this.$http({
        url: this.$http.adornUrl('/hotel/facilitator/parse-license'),
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.businessLicense = data.license;
        } else {
        }
      });
    },
    onIdCardPicListFileChange(index, file, fileList) {
      const list = fileList.filter(item => item.status === 'success').map(item => item.response.url);
      if (index == 0) {
        this.$set(this.certificateInfo, 'sfzFront', list[0]);
      }
      if (index == 1) {
        this.$set(this.certificateInfo, 'sfzBack', list[0]);
      }
      if (index == 2) {
        this.$set(this.certificateInfo, 'sfzHand', list[0]);
      }
    },
    onCompanyIdCardPicFileChange(index, file, fileList) {
      const list = fileList.filter(item => item.status === 'success').map(item => item.response.url);
      if (index == 0) {
        this.$set(this.certificateInfo, 'yyImg', list[0]);
      }
      if (index == 1) {
        this.$set(this.certificateInfo, 'otherImgs', list[0]);
      }
    },
    onExceed(file, fileList) {
      this.$message.error(`最多上传${fileList.length}张`);
    }
  }
};
</script>

<style lang="scss">
.container {
  margin: 0 auto;
  width: 1200px;
  .login-captcha {
    img {
      max-width: 100%;
      height: 34px;
    }
  }
  .steps {
    margin: 20px 0;
  }

  .form {
    width: 800px;
  }

  .map-wrap {
    position: relative;

    .map {
      height: 400px;
    }

    .map-search {
      position: absolute;
      left: 20px;
      top: 20px;
    }
  }

  .strong {
    color: red;
  }
}
</style>
